<template>
  <div>
    <!--  <h1>借阅中心</h1> -->
    <div class="commontop">
      <div class="commontop-left">
        <el-input
          placeholder="项目名称、ID"
          v-model="pages.keyword"
          @change="INput"
          @clear="INput"
          @keyup.enter.native="goSearch()"
          clearable
          prefix-icon="el-icon-search"
        ></el-input>

        <el-date-picker
          v-model="pages.dates"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
        <el-button
          class="searchbgc"
          @click="goSearch"
          icon="iconfont icon-sousuo2"
          >搜索</el-button
        >
      </div>
      <div class="commontop-right">
        <el-button
          icon="iconfont icon-daochu5"
          v-show="xsyc === '1' ? true : false"
          >导出台账</el-button
        >
        <el-button
          v-show="xsyc === '1' ? true : false"
          class="red"
          icon="iconfont icon-shanchu1"
          @click="deleteSelectItem()"
          >删除</el-button
        >
      </div>
    </div>
    <div class="content">
      <el-table
        v-loading="isLoading"
        :data="tableData"
        @selection-change="handleSelectionChange"
        :header-cell-style="{ backgroundColor: '#3963fd', color: '#fff' }"
        style="width: 100%; margin-top: 20px"
      >
        <template slot="empty">
          <img src="@/assets/imgs/暂未数据.png" alt style="margin-top: 104px" />
          <p style="margin-top: 15px; margin-bottom: 104px">暂未有数据</p>
        </template>
        <el-table-column type="selection"></el-table-column>
        <el-table-column
          width="80"
          prop="user_id"
          label="编号"
        ></el-table-column>
        <el-table-column
          width="80"
          prop="user.nickname"
          label="借阅人"
        ></el-table-column>
        <el-table-column
          prop="start_end_date"
          label="借阅时间"
        ></el-table-column>
        <el-table-column prop="id111" label="借阅内容"></el-table-column>
        <el-table-column prop="reason" label="借阅理由"></el-table-column>
        <el-table-column prop="downloads" label="下载份数"></el-table-column>
        <el-table-column prop="duration" label="阅读时长"></el-table-column>
        <!--  <el-table-column label="状态">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.value"></el-switch>
          </template>
        </el-table-column> -->
        <el-table-column label="操作" width="140px">
          <template slot-scope="scope">
            <el-button
              class="green"
              size="mini"
              @click="handleEdit(scope.row.id)"
              ><i class="el-icon-edit"></i
            ></el-button>
            <el-button
              size="mini"
              class="red"
              @click="handleDelete(scope.row.id)"
              ><i class="el-icon-delete"></i
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current_page"
          :page-sizes="pageSizeArr"
          :page-size="pages.per_page"
          layout="total, sizes, prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog
      class="tab"
      title="编辑"
      width="38%"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="editForm" ref="editForm">
        <el-form-item label="借阅人" :label-width="formLabelWidth">
          <el-input
            placeholder="请输入借阅人"
            v-model="editForm.user_id"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="借阅时间" :label-width="formLabelWidth">
          <el-input
            placeholder="请输入时间"
            v-model="editForm.start_end_date"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="借阅内容" :label-width="formLabelWidth">
          <el-input
            placeholder="请输入借阅内容"
            v-model="editForm.title"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="借阅理由" :label-width="formLabelWidth">
          <el-input
            placeholder="请输入借阅理由"
            v-model="editForm.reason"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="下载份数" :label-width="formLabelWidth">
          <el-input
            placeholder="请输入下载份数"
            v-model="editForm.downloads"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <!--  <el-form-item label="阅读时长" :label-width="formLabelWidth">
          <el-date-picker
            v-model="editForm.value2"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
          >
          </el-date-picker>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editModify('editForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import commonInfo from "@/utils/common";
import {
  Borrows,
  delBorrows,
  delBorrowsMore,
  BorrowsModify,
  Borrowsquery,
} from "../../../../api/jurisdiction/index";
export default {
  data() {
    return {
      //按钮显示隐藏
      xsyc: "1",
      /* 树状图搜索 */

      /* 表格数据 */
      tableData: [],
      //页数
      pages: {
        per_page: 10,
        page: 1,
        dates: "",
        keyword: "",
      },
      //表格页面
      pageSizeArr: JSON.parse(JSON.stringify(commonInfo.pageSizeArr)),
      /* 当前页 */
      current_page: 1,
      /* 总条数 */
      total: 0,
      /* 加载页面 */
      isLoading: true,
      /* 多选的数组 */
      multipleSelection: [],
      //表格编辑蒙尘
      dialogFormVisible: false,
      /* 表单宽度 */
      formLabelWidth: "120px",
      /* 表格编辑表单 */
      editForm: {
        start_end_date: "",
        id: "",
        user_id: "",
        reason: "",
        downloads: "",
      },
    };
  },
  methods: {
    //表格编辑查询
    async handleEdit(id) {
      let res = await Borrowsquery(id);
      console.log(res, "1234");
      this.editForm = res.data.data;
      this.dialogFormVisible = true;
    },
    //表格编辑成功
    editModify(formName) {
      this.$refs[formName].validate(async (valid) => {
        //console.log(valid);
        if (valid) {
          let res = await BorrowsModify(this.editForm);
          //console.log(res);
          if (res.data.code === 200) {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "success",
            });
            this.loadData();
          } else {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "error",
            });
          }
        }
        this.dialogFormVisible = false;
      });
    },
    //多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //多选删除
    deleteSelectItem() {
      if (this.multipleSelection == null) {
        this.$message({
          showClose: true,
          duration: 3000,
          message: "请先选中要删除的数据哦！ 亲",
          type: "error",
        });
      } else {
        this.$confirm("确认删除?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(async () => {
          // 显示loading
          this.$loading();
          let arr = this.multipleSelection.map((item) => item.id);
          // console.log(arr);
          let ids = arr.join(",");
          // console.log(ids);
          let res = await delBorrowsMore({ ids });
          // console.log(res);
          if (res.data.code === 200) {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "success",
            });
            this.loadData();
            this.$loading().close();
          } else {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "error",
            });
            this.$loading().close();
          }
        });
      }
    },
    //表格删除
    handleDelete(id) {
      this.$confirm("确认删除？").then(async () => {
        let res = await delBorrows(id);
        console.log(res);
        if (res.data.code === 200) {
          this.$message({
            showClose: true,
            duration: 3000,
            message: res.data.msg,
            type: "success",
          });
          this.loadData();
        } else {
          this.$message({
            showClose: true,
            duration: 3000,
            message: res.data.msg,
            type: "error",
          });
        }
      });
    },
    /* 获取表格数据 */
    async loadData(num) {
      let res = await Borrows(num);
      console.log(res);
      this.tableData = res.data.data.data;
      this.total = res.data.data.total;
      this.per_page = res.data.data.per_page;
      this.current_page = res.data.data.current_page;
      this.isLoading = false;
    },
    /* 树状图搜索 */
    INput() {
      if (this.pages.keyword == "") {
        this.loadData();
      }
    },
    //表格搜索
    async goSearch() {
      // 显示loading
      this.$loading();
      this.pages.page = 1;
      this.pages.per_page = 10;
      this.current_page = 1;
      console.log(this.pages);
      if (this.pages.keyword == "") {
        this.$message.warning("查询条件不能为空！");
        return;
      }
      let res = await Borrows(this.pages);
      console.log(res, "123");
      this.tableData = res.data.data.data;
      this.total = res.data.data.total;
      this.per_page = res.data.data.per_page;
      this.current_page = res.data.data.current_page;
      this.$loading().close();
    },

    //分页
    handleCurrentChange(val) {
      this.current_page = val;
      this.pages.page = val;
      this.loadData(this.pages);
    },
    //分页
    handleSizeChange(val) {
      this.pages.per_page = val;
      this.loadData(this.pages);
    },
  },
  /* mounted: function () {
    this.loadData();
  }, */
  created() {
    this.loadData();
  },
};
</script>

<style scoped lang="less">
.content {
  flex: 1;
  /deep/.el-table__header {
    margin-bottom: 20px;
  }
  /deep/.el-table {
    background-color: #f3f5fb;
  }
  /deep/.el-table .cell {
    display: flex;
  }
  /deep/.el-button--mini {
    font-size: 18px !important;
    padding: 7px 5px;
  }
}
.commontop .el-input {
  width: 20%;
  background-color: #fff;
}
// 滚动条的宽度
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  width: 6px; // 横向滚动条
  height: 6px; // 纵向滚动条 必写
}
// 滚动条的滑块
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 3px;
}
</style>